<template>
  <el-dialog
    :model-value="dialogVisible"
    title="文件上传"
    width="30%"
    @close="handleClose"
  >
    <el-upload
      class="upload-demo"
      drag
      action="/api/fmms/dataDisplayController/importExcel"
      multiple
      :before-upload="beforeUpload"
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        Drop file here or <em>click to upload</em>
      </div>
      <template #tip>
        <div class="el-upload__tip">
          xlsx/xsl files with a size less than 1MB
        </div>
      </template>
    </el-upload>

    <!-- <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">Cancel</el-button>
        <el-button type="primary" @click="confirm">Confirm</el-button>
      </span>
    </template> -->
  </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus/lib/components'
import { defineProps, defineEmits } from 'vue'

const emits = defineEmits(['update:modelValue'])
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
    require: true
  }
})

const handleClose = () => {
  emits('update:modelValue', false)
}

const confirm = () => {
  handleClose()
}

const beforeUpload = (file) => {
  const fileType = [
    'application/vnd.ms-excel',
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  ]
  if (!fileType.includes(file.type)) {
    ElMessage({
      type: 'error',
      duration: 1500,
      message: 'file must be xsl or xlsx format'
    })
    return false
  } else if (file.size / 1024 / 1024 > 1) {
    ElMessage({
      type: 'error',
      duration: 1500,
      message: 'file size can not exceed 1MB!'
    })
    return false
  }
  return true
}

const handleExceed = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 1, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  )
}
</script>

<style lang="scss" scoped>
.upload-demo {
  text-align: center;
}
</style>
